<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高效开发</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="image-desc" id="imageDesc"></div>
<div class="image-desc" id="imageDesc1"></div>
<div class="image-desc" id="imageDesc2"></div>
<script>
    var imageDesc = function (domId) {
//        定义工厂类 便于后期使用
        var factory = {
            rotate: {img:'rotate-img',cont:'rotate-content'},
            over: {img:'over-img',cont:'over-content'},
            hover:{img:'hover-img',cont:'hover-content'}
        };
        var sef = this;
        var imgDesc = document.getElementById(domId);
        function drawBox(param) {
            /* 获取到当前的样式数组信息*/
            var mark=factory[sef.type];
            var contentTitle = '<h4 class="title">' + param.title + '</h4>';
            var contentDesc = '<p class="description">' + param.desc + '</p>';
            var contentLinks = function (e) {
                if (e) {
                    var ul = '<ul class="social-links">';
                    for (var i = 0; i < e.length; i++) {
                        var item = e[i];
                        ul += ' <li><a target="_blank" href="' + item.url + '">' + item.des + '</a></li>'
                    }
                    ul += '</ul>';
                    return ul;
                }
                return;
            }(param.linksData);
            var boxContent = '<div class="box-content '+mark.cont+'">' + contentTitle + contentDesc + contentLinks + '</div>';
            var boxImg = ' <div class="box-img '+mark.img+'"><img src="' + param.imgUrl + '"></div>';
            var box = '<div class="box">' + boxImg + boxContent + '</div>';
            imgDesc.innerHTML += box;
        }
        /* 初始化多行的数据信息，支持数据量大于0*/
        sef.init = function (params) {
            sef.params=params;
            sef.type=params.type;
            var  param=params.data;
            for (var i = 0; i < param.length; i++) {
                addBox(param[i]);
            }
        };
        /* 添加盒子模型*/
        var addBox = function (param) {
            if (!param)return;
            drawBox(param);
        };
        /*天假一个盒子模型*/
        sef.addOneBox=function (param) {
            if(!param)return;
            sef.type=param.type?param.type:sef.type;
            addBox(param.data);
        }
    };
    /* 多行数据对象*/
    var data = [
        {
            imgUrl: "images/1.jpg",
            title: "Duende",
            desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae libero orci." +
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed vestibulum.",
            linksData: [
                {url: "https://www.baidu.com", des: "QQ"},//,ico:"fa-qq"
                {url: "https://www.baidu.com", des: "微博"},//,ico:"fa-weibo"
                {url: "https://www.baidu.com", des: "微信"}//,ico:"fa-weixin"
            ]
        }, {
            imgUrl: "images/2.jpg",
            title: "Duende",
            desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae libero orci." +
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed vestibulum.",
            linksData: [
                {url: "https://www.baidu.com", des: "QQ"},//,ico:"fa-qq"
                {url: "https://www.baidu.com", des: "微博"},//,ico:"fa-weibo"
                {url: "https://www.baidu.com", des: "微信"}//,ico:"fa-weixin"
            ]
        }, {
            imgUrl: "images/3.jpg",
            title: "Duende",
            desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae libero orci." +
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed vestibulum.",
            linksData: [
                {url: "https://www.baidu.com", des: "QQ"},//,ico:"fa-qq"
                {url: "https://www.baidu.com", des: "微博"},//,ico:"fa-weibo"
                {url: "https://www.baidu.com", des: "微信"}//,ico:"fa-weixin"
            ]
        }, {
            imgUrl: "images/1.jpg",
            title: "Duende",
            desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae libero orci." +
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed vestibulum.",
            linksData: [
                {url: "https://www.baidu.com", des: "QQ"},//,ico:"fa-qq"
                {url: "https://www.baidu.com", des: "微博"},//,ico:"fa-weibo"
                {url: "https://www.baidu.com", des: "微信"}//,ico:"fa-weixin"
            ]
        }];
    var oneData=data[0];
    var img = new imageDesc('imageDesc');
    /* 一次加载多行数据信息*/
//    img.init({ data:data, type:"rotate" });
/* 一次只加载一行数据信息*/
    img.addOneBox({
        data:oneData,
        type:'rotate'
    });
    img.addOneBox({
        data:oneData,
        type:'over'
    });
    img.addOneBox({
        data:oneData,
        type:'hover'
    })
    /*增加不同行的数据信息，且类型不同*/
//    new imageDesc('imageDesc1').init({ data:data, type:"over" });
//    new imageDesc('imageDesc2').init({ data:data, type:"hover" });
</script>
</body>
</html>